<template>
  <div class="main-app">
    <el-row style="margin-top: 40px">
      <el-form ref="form" :model="form" :rules="rules" style="width: 50%;margin-left: 25%;">

        <el-form-item label="组名称:" required prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="产品系列" prop="characteristics">
          <template>
            <el-select v-model="form.seriesId" multiple placeholder="请选择产品系列" style="width: 100%;"
              @change="$forceUpdate()">
              <el-option v-for="item in tableData" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="备注:"  style="width:100%">
          <el-input v-model="form.remarks" type="textarea" :rows="4" clearable :disabled="isView" />
        </el-form-item>
        <el-form-item label="状态:" required>
          <el-radio-group v-model="form.disabled">
            <el-radio label='0'>启用</el-radio>
            <el-radio label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>


    </el-row>

    <el-row style="margin-top: 40px; text-align: center">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
  import {
    SubmitGroupData,
    AppSeriesAllLists,
    Groups
  } from '../../../api/group.js';
  export default {
    data() {
      return {
        id: "",
isView:false,
        tableData: [],

        form: {
          name: "",
          disabled: "0",
          seriesId: [],
          remarks:""
        },
        rules: {
          name: [{
            required: true,
            message: "请输入组名称",
            trigger: "blur"
          }],
          seriesId: [{
            required: true,
            message: "请选择产品系列",
            trigger: "change"
          }],

        },
      };
    },

    async created() {
      const {
        id,

      } = this.$route.params;
      Promise.all([
        await Groups({
          Id: id
        }),
        await AppSeriesAllLists({}),

      ]).then((result) => {
        if (result[1].data) {
          this.tableData = result[1].data;
        }

        if (result[0].data.id != null) {
          this.form = result[0].data;
          this.form.seriesId = result[0].data2.map(item => {
            return item.appId
          })
        } else {
          this.form.disabled = '0'
        }

      });

      this.id = id;

    },

    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      save() {
        // 校验必填项
        this.$refs["form"].validate(async (valid) => {
          if (valid) { // 校验成功

            if (this.form.seriesId === undefined || this.form.seriesId.length === 0) {
              this.$notify.error({
                title: "失败",
                message: "请选择产品系列",
                duration: 3000,
              });
              return
            }
            let data = {};
            let message = "";
            let seriesData = [];

            this.form.seriesId.forEach(item => {
              let obj = this.tableData.find(T => {
                return T.id == item
              })
              if (obj) {
                seriesData.push(obj);
              }
            })


            let seriesIdStr = JSON.stringify(seriesData);


            if (!this.id) {
              data = {
                Name: this.form.name,
                Disabled: this.form.disabled,
                SeriesIds: seriesIdStr,
                Remarks:this.form.remarks

              };
              message = "新增成功";
            } else {
              data = {
                Id: this.id,
                Name: this.form.name,
                Disabled: this.form.disabled,
                SeriesIds: seriesIdStr,
                 Remarks:this.form.remarks
              };
              message = "修改成功";
            }

            const {
              success,
              msg
            } = await SubmitGroupData(data);

            if (success) {
              this.$notify({
                title: "成功",
                message: message,
                type: "success",
                duration: 3000,
              });
              this.$router.push("/organization/group");
            } else {
              this.$notify.error({
                title: "失败",
                message: msg,
                duration: 3000,
              });
            }
          }
        });
      },

      cancel() {
        this.$router.push("/organization/group");
      },
    },
  };
</script>
